<template>
	<view class="page">
		<view :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view class="nowReal" style="padding-top: 10rpx;">
			<view class="nowRealImg">
				<!-- <image src="../../static/icon/shiming.png" mode=""></image> -->
				实名后，自动关联证书，证书动态尽在掌控
			</view>
			<view class="nowForm" v-model="form">
				<view class="nowFormList" :class="form.realName==''?'activeTrue':'activeFalse'">
					<view>*姓名</view>
					<input class="uni-input" v-model="form.realName" name="input" placeholder="请输入您的真实姓名" />
				</view>
				<view class="nowFormList" :class="form.idCard==''?'activeTrue':'activeFalse'">
					<view>*身份证</view>
					<input class="uni-input" v-model="form.idCard" name="input" placeholder="请输入您的身份证号" />
				</view>
				<view class="nowFormList" :class="form.linkPhone==''?'activeTrue':'activeFalse'">
					<view>*手机号</view>
					<input type="number" class="uni-input" v-model="form.linkPhone" name="input"
						placeholder="请输入您得手机号" />
				</view>
				<view class="nowFormList getCodediv" :class="form.validCode==''?'activeTrue':'activeFalse'">
					<view>*验证码</view>
					<view class="main">
						<input class="uni-input" :disabled="codeCheck" @click="onInput" v-model="form.validCode"
							name="input" placeholder="请输入您的6位验证码" />
						<view class="getCode">
							<view class="img">
								<image @click="clear" src="../../static/icon/qingchu.png" mode="" />
								<view class="btnCode" @click="getCode">{{countDownNum}}<text v-show="timer!=''">秒</text>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="fined" @click="submitForm(form)">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	import head1 from '../head/head.vue'
	export default {
		components: {
			head1
		},
		data() {
			return {
				title: "我要实名",
				countDownNum: '获取验证码',
				timer: '',
				num: '000',
				lock: false, //防止重复点击
				codeCheck: true,
				codeInput: true,
				demo: {
					top: '',
					height: ''
				},
				titleFile: '',
				form: {
					realName: "",
					idCard: "",
					linkPhone: "",
					validCode: "",
					userId: ''
				}
			}
		},
		onLoad(options) {

			this.titleFile = options.title
			console.log('kkk')
			console.log(this.titleFile)
		},
		computed: {
			getUserId() {
				return this.$store.state.userId
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			this.form.userId = this.getUserId
		},
		methods: {
			getCode() {
				let checkPhone = /^1[3-9]\d{9}$/;
				if (this.form.linkPhone == '') {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none'
					})
				} else if (checkPhone.test(this.form.linkPhone) == false) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					})
					return;
				} else if (this.lock == false) { //true
					this.lock = true
					this.countDown() //获取验证码
					this.codeCheck = false //激活验证码input框
					this.codeInput = false //验证码输入框点击提示去掉
				}
			},
			// 获取验证码倒计时

			countDown() {
				this.countDownNum = 60;
				this.timer = setInterval(() => {
					//需要做的事情
					this.countDownNum--
					if (this.countDownNum == 0) {
						clearInterval(this.timer)
						this.timer = ''
						this.countDownNum = "获取验证码"
						this.lock = false
					}
				}, 1000);
				this.$myResquest.personAuthSend({
					tel: this.form.linkPhone
				}).then(res => {

				})
			},
			// 提交表单
			submitForm(form) {
				// 身份证号验证
				let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				// // 手机号验证
				let checkPhone = /^1[3-9]\d{9}$/;
				if (form.realName == '') {
					uni.showToast({
						title: "姓名不能为空",
						icon: 'none'
					})
				} else if (form.idCard == '') {
					uni.showToast({
						title: "身份证号不能为空",
						icon: 'none'
					})
				} else if (reg.test(form.idCard) == false) {
					uni.showToast({
						title: '身份证号格式不正确',
						icon: 'none'
					})
					return;
				} else if (form.linkPhone == '') {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none'
					})
				} else if (checkPhone.test(form.linkPhone) == false) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					})
					return;
				} else if (form.validCode == '') {
					uni.showToast({
						title: "验证码不能为空",
						icon: 'none'
					})
				} else {
					let _this = this
					_this.$myResquest.personAuth(form).then(res => {
						if (res.data.code == 200) {
							// 实名存储本地
							uni.setStorageSync('userIsReal', '已实名')
							//身份证号存储到本地
							uni.setStorageSync('userSfzh', form.idCard)
							uni.showToast({
								title: '实名成功,数据加载中..'
							})
							setTimeout(function() {
								// 判断是否实名
								_this.$store.commit('newIsRealName', '已实名')
								_this.$store.commit('newUsername', form.realName)

								// 身份证号
								_this.$store.commit('newSfzh', form.idCard)
								if (_this.titleFile == '投标档案') {
									uni.navigateTo({
										url: '../tenderFile/tenderFile'
									})
								}
								if (_this.titleFile == '分析预警') {
									uni.navigateTo({
										url: '../noRealWaring/waring'
									})
								}
								if (_this.titleFile == "我的证书") {
									uni.navigateTo({
										url: '../realName/realName'
									})
								}
								if (_this.titleFile == "证书动态") {
									uni.navigateTo({
										url: '../../pageA/certDynamics/certDynamics'
									})
								}
								if (_this.titleFile == "会员卡") {
									uni.showLoading({
										title: '实名成功,即将跳转..'
									})
									setTimeout(function() {
										uni.redirectTo({
											url: '../../pages/home/home?PageCur=' + 'my'
										})
										uni.hideLoading()
									}, 1000)
								}
								if (_this.titleFile == "简历实名") {
									uni.showLoading({
										title: '实名成功,即将跳转..'
									})
									setTimeout(function() {
										uni.redirectTo({
											url: '../../pageA/myResume/myResume'
										})
										uni.hideLoading()
									}, 1000)
								}
								if (_this.titleFile == "发布实名") {
									uni.showLoading({
										title: '实名成功,即将跳转到首页'
									})
									setTimeout(function() {
										uni.redirectTo({
											url: '../../pages/home/home'
										})
										uni.hideLoading()
									}, 2000)
								}
								if (_this.titleFile == "投递实名") {
									let positionid = uni.getStorageSync('positionId')
									uni.showLoading({
										title: '实名成功,即将跳转..'
									})
									setTimeout(function() {
										uni.redirectTo({
											url: '../../pageB/zhaopin1/positiondetail?id=' +
												positionid
										})
										uni.hideLoading()
									}, 1000)
								}
							}, 1000)
						} else {
							uni.showToast({
								title: '实名失败',
								icon: 'none'
							})

						}
					})
				}
			},
			onInput() {
				if (this.codeInput) {
					uni.showToast({
						title: "请先获取验证码",
						icon: 'none'
					})
				}

			},
			clear() {
				this.form.validCode = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activeFalse {
		color: #000000;
	}

	.activeTrue {
		color: red;
	}

	.page {
		background: pink;
	}

	.nowReal {
		box-sizing: border-box;
		background: #f7f7f7;
		height: 100%;
		width: 100%;
		position: absolute;

		.nowRealImg {
			width: 653rpx;
			height: 102rpx;
			background: #49b3af;
			border-radius: 30rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 36rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nowForm {
			box-sizing: border-box;

			.nowFormList {
				    margin-top: 22rpx;
				    height: 154rpx;
				    padding: 0 70rpx;
				    background: #ffffff;
				    display: flex;
				    flex-direction: column;
				    /* align-items: center; */
				    justify-content: center;

				view {
					font-size: 33rpx;
					font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
					font-weight: bold;
					color: #49b3af;
				}

				.uni-input {
					margin-top: 15px;
				}

				.line {
					height: 2rpx;
					background: #e5e5e5;
					margin-top: 20rpx;
				}


			}

			.getCodediv {
				position: relative;

				.main {
					display: flex;
					margin-top: 20rpx;
					justify-content: space-between;
					    font-size: 27rpx;
				}

				.getCode {
					width: 226rpx;
					height: 48rpx;
					line-height: 48rpx;
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.img {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
						}

						.lineDiv {}

						.btnCode {
							display: flex;
							align-items: center;
							height: 28rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: center;
							color: #d4d6e1;
							line-height: 36rpx;
							padding-left: 20rpx;
							box-sizing: border-box;
							border-left: 2rpx solid #d4d6e1;
							width: 200rpx;
							justify-content: center;
						}
					}
				}
			}

			.fined {
				width: 600rpx;
				height: 88rpx;
				background: #4bb1af;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #ffffff;
				margin-top: 125rpx;
				z-index: 9999;
				margin: 89rpx auto 0;
			}

		}
	}
</style>
